<template>
  <el-card>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="车辆品牌">
        <el-input
          v-model="formInline.carNumber"
          placeholder="车辆品牌"
          clearable
        />
      </el-form-item>
      <el-form-item label="车主姓名">
        <el-input
          v-model="formInline.personName"
          placeholder="车主姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.cardStatus" placeholder="状态" clearable>
          <el-option label="可用" :value="0" />
          <el-option label="过期" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-button @click="add" type="primary" style="margin: 10px 0">添加</el-button>
  <el-card style="margin: 20px 0">
    <el-table :data="tableData" height="300" style="width: 100%">
      <el-table-column type="selection" />
      <el-table-column type="index" label="#" />
      <el-table-column prop="personName" label="车主名称" />
      <el-table-column prop="phoneNumber" label="联系方式" />
      <el-table-column prop="carNumber" label="车牌号码" />
      <el-table-column prop="carBrand" label="车俩品牌" />
      <el-table-column prop="totalEffectiveDate" label="剩余有效天数" />
      <el-table-column prop="cardStatus" label="状态">
        <template #default="scope">
          {{ scope.row.cardStatus === 0 ? "可用" : "过期" }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button text type="primary" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button text type="primary" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="page.page"
      v-model:page-size="page.pageSize"
      :page-sizes="[6, 8, 12, 16]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getList"
      @current-change="getList"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { getCardListApi, delCardListApi } from "@/api/api";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css";
const router = useRouter();
const tableData = ref([]);
const formInline = reactive({
  carNumber: "",
  personName: "",
  cardStatus: "",
});
const total = ref(0);
const page = reactive({
  page: 1,
  pageSize: 6,
});
const getList = () => {
  getCardListApi({
    ...page,
    ...formInline,
  }).then((res: any) => {
    if (res.code == 10000) {
      tableData.value = res.data.rows;
      total.value = res.data.total;
    }
  });
};
getList();
const add = () => {
  router.push({
    path: "/addCard",
    query: { title: "添加月卡" },
  });
};
const edit = (row: any) => {
  router.push({
    path: "/addCard",
    query: { title: "编辑月卡", id: row.id },
  });
};
const del = (row: any) => {
  delCardListApi({ id: row.id }).then((res: any) => {
    if (res.code == 10000) {
      ElMessage.success("删除成功");
      getList();
    }
  });
};
</script>

<style lang="scss" scoped></style>
